<script setup lang="ts">
// 技术栈：D3.js
import { ref, onMounted } from "vue";
import D3BarChart from "@/components/chart/D3/D3BarChart.vue";
import D3LineChart from "@/components/chart/D3/D3LineChart.vue";
import D3PieChart from "@/components/chart/D3/D3PieChart.vue";
import D3barChartHorizontal from "@/components/chart/D3/D3barChartHorizontal.vue";
import D3Map from "@/components/chart/D3/D3Map.vue";

onMounted(() => {});
const chartData = ref([25, 40, 60, 90, 150]);
const pieData = ref([
  { label: "产品A", value: 35, color: "#4e79a7" },
  { label: "产品B", value: 25, color: "#f28e2b" },
  { label: "产品C", value: 20, color: "#e15759" },
  { label: "产品D", value: 15, color: "#76b7b2" },
  { label: "产品E", value: 5, color: "#59a14f" },
]);

</script>
<template>
  <div class="screen overflow-hidden">
    <header class="flex justify-between w-full pb-3">
      <div class="px-2.5 w-1/3">
        <span class="text-white text-sm">当前时间：2020年8月11日-11时53分40秒</span>
      </div>
      <h1 class="text-white text-2xl py-1.5 flex-1 text-center">数据大屏</h1>
      <div class="px-2.5 w-1/3 flex items-center justify-end">
       
      </div>
    </header>
    <div class="screen-container w-full grid grid-cols-3 gap-1">
      <section class="mx-0.5" style="flex: 4; flex-shrink: 0">
        <div class="panel mb-3">
          <div class="panel-title pt-2">
            <h6 class="text-white text-center pt-1.5 pb-1">柱状图-各行业程序员数量</h6>
          </div>
          <div class="panel-body overflow-hidden px-1.5 pb-3" style="height: 12rem">
            <D3BarChart :data="chartData" :width="500" :height="300" />
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel mb-3">
          <div class="panel-title pt-2">
            <h6 class="text-white text-center">折线图-学习变化</h6>
          </div>
          <div class="panel-body overflow-hidden px-1.5 pb-3" style="height: 12rem">
            <D3LineChart
              :data="chartData"
              :width="500"
              :height="300"
              :showFillBg="false"
            />
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel mb-3">
          <div class="panel-title pt-2">
            <h6 class="text-white text-center">饼形图-工程师年龄分布</h6>
          </div>
          <div class="panel-body overflow-hidden px-1.5 pb-3" style="height: 12rem">
            <D3PieChart
              :data="pieData"
              :isNightingale="false"
              :showGuideLine="false"
              :innerRadiusRatio="0.63"
             theme="light"
              :highlightColor="'#cccccc67'"
              :margin="{ top: 20, right: 20, bottom: 30, left: 40 }"
            />
          </div>
          <div class="panel-footer"></div>
        </div>
      </section>

      <section
        class="px-1.5 flex flex-col"
        style="flex: 5; min-width: 350px; max-height: calc(100vh - 56px)"
      >
        <div class="panel px-5 pt-3 pb-2">
          <div
            class="py-2.5 px-5 flex monitor pos-relative justify-around items-center"
            style="font-family: 'DSDigital'"
          >
            <p class="text-5xl text-white" style="color: #ffeb7b">125811</p>
            <b class="text-gray-300 line"></b>
            <p class="text-5xl text-white" style="color: #ffeb7b">125811</p>
          </div>
          <div class="flex justify-around pt-3">
            <span class="text-white">程序员需求人数</span>
            <span class="text-white">程序员供应人数</span>
          </div>
        </div>
        <div class="map flex-1 overflow-hidden" style="height: calc(100vh - 450px)">
          <div style="height: 100%; position: relative; z-index: 15; max-height: 100%">
            <D3Map/>
          </div>
          <div class="map1" style="z-index: 3"></div>
          <div class="map2" style="z-index: 2"></div>
          <div class="map3" style="z-index: 1"></div>
        </div>
      </section>

      <section class="mx-0.5" style="flex: 4; flex-shrink: 0">
        <div class="panel mb-3">
          <div class="panel-title pt-2">
            <h6 class="text-white text-center pt-1.5 pb-1">柱状图-各行业程序员数量</h6>
          </div>
          <div class="panel-body overflow-hidden px-1.5 pb-3" style="height: 12rem">
            <D3barChartHorizontal :data="chartData" :width="500" :height="300" />
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel mb-3">
          <div class="panel-title pt-2">
            <h6 class="text-white text-center">折线图-学习变化</h6>
          </div>
          <div class="panel-body overflow-hidden px-1.5 pb-3" style="height: 12rem">
            <D3LineChart
              :data="chartData"
              :width="500"
              :height="300"
              :showFillBg="true"
            />
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel mb-3">
          <div class="panel-title pt-2">
            <h6 class="text-white text-center">饼形图-工程师年龄分布</h6>
          </div>
          <div class="panel-body overflow-hidden px-1.5 pb-3" style="height: 12rem">
            <D3PieChart
              :data="pieData"
              :isNightingale="true"
              :showGuideLine="true"
              :innerRadiusRatio="0.3"
             theme="light"
              :highlightColor="'#cccccc67'"
              :margin="{ top: 20, right: 20, bottom: 30, left: 40 }"
            />
          </div>
          <div class="panel-footer"></div>
        </div>
      </section>
    </div>
  </div>
</template>
<style scoped lang="scss">
// 定义混入
@mixin pos-mixin() {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 20%;
}
@mixin pos-map() {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 75%; /* 任意百分比 */
  aspect-ratio: 1 / 1; /* 宽高比1:1 */
  background-size: cover;
  z-index: 1;
  transition: all 1s;
}
.text-white{
  color: #fff !important;
}
.screen {
  display: flex;
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #06164a;
  padding: 0 5px 5px 5px;
  header {
    background-image: url("@/assets/images/screen/head_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  }
  .screen-container {
    display: flex;
  }
}
.panel {
  background-color: rgba(101, 132, 226, 0.1);
  background-image: url("@/assets/images/screen/grid.png");
  .panel-title {
    position: relative;
    &::before {
      @include pos-mixin();
      top: 0;
      left: 0;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      @include pos-mixin();
      top: 0;
      right: 0;
      border-top: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }
  .panel-footer {
    position: relative;
    height: 0.25rem;
    &::before {
      @include pos-mixin();
      bottom: 0;
      left: 0;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      @include pos-mixin();
      bottom: 0;
      right: 0;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }
}
.monitor {
  position: relative;
  border: 1px solid #02a6b541;
  .line {
    width: 2px;
    height: 25px;
    background-color: #ffffff1a;
  }
  &::before {
    @include pos-mixin();
    top: 0;
    left: 0;
    width: 30px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
    border-radius: 0;
  }
  &::after {
    @include pos-mixin();
    bottom: 0;
    right: 0;
    width: 30px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    border-radius: 0;
  }
}
.map {
  position: relative;
  .map1 {
    @include pos-map();
    background-image: url("@/assets/images/screen/jt.png");
    animation: rotate-counterclockwise 10s linear infinite;
    width: 82%;
    opacity: 0.75;
  }
  .map2 {
    @include pos-map();
    background-image: url("@/assets/images/screen/lbx.png");
    animation: rotate-clockwise 15s linear infinite;
    width: 95%;
    opacity: 0.5;
  }
  .map3 {
    @include pos-map();
    background-image: url("@/assets/images/screen/map.png");
    opacity: 0.35;
  }
}
@keyframes rotate-clockwise {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-counterclockwise {
  to {
    transform: rotate(-360deg);
  }
}
</style>
